<script lang="ts" setup>
import { ref, computed } from "vue";
import { nav } from "../tools/const";
import useUserInfoStore from "@/stores/user";
import { getImg } from "@/tools/utils";
import { watch } from "vue";

import { useRoute } from "vue-router";
const route = useRoute();
const curroute = ref("/home");
watch(
  () => route,
  (newRoute, oldRoute) => {
    curroute.value = newRoute.fullPath;
    // 在这里可以执行路由变化时需要做的任何逻辑
  },
  { deep: true, immediate: true }
);

let user = computed(() => useUserInfoStore().getUserInfo);
// userStore.updateUserInfo(userinfo);
// console.log(userStore.info.name);
let tabbarList = [
  {
    title: "首页",
    url: "/home",
  },
  {
    title: "试验",
    url: "/Professional",
  },
  {
    title: "研究者",
    url: "/Dummy",
  },
  {
    title: "研究中心",
    url: "/JgCenter",
  },
  {
    title: "招募",
    url: "/recruit",
  },
  {
    title: "培训",
    url: "/community-service",
  },
  {
    title: "通知公告",
    url: "/Notice",
  },
];
let navs = ref(nav);
const tab = ref(0);
const loginVisible = ref(false);
const inputStyle = {
  background: "#F8F8FA",
  border: "none",
};
</script>
<template>
  <div>
    <div class="header ">
      <p>欢迎访问，数字化临床研究平台！</p>
      <div class="header_r">

        <p @click="loginVisible = true, tab = 0">{{ user.displayName || "登录" }}</p>
        <div class="line"></div>
        <p>注册</p>
        <div class="line"></div>

        <p>工作台</p>
      </div>
    </div>

    <div id="nav" class="nav clearfix">
      <div class="logo">
        <img src="@/assets/images/1.png" alt="">
      </div>
      <ul class="">
        <li class="nLi" v-for="(i, n) in tabbarList" :class="curroute.includes(i.url)  ? 'nlion' : ''" :key="n">
          <router-link :to="i.url">
            {{ i.title }}
          </router-link>
        </li>
        <!-- <el-dropdown class="nLi" v-for="(item, idx) in navs" :key="idx" :disabled="!Boolean(item.children)">
          <router-link :to="item.path">
            <h3><a>{{ item.title }}</a></h3>
          </router-link>
          <template #dropdown>
            <el-dropdown-menu>
              <ul class="nav-sub">
                <li v-for="(subItem, idx) in item.children" :key="idx">
                  <a href="#">{{ subItem.title }}</a>
                </li>
              </ul>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
      </ul>
    </div>
    <div style="height: 138px;"></div>

  </div>
  <div class="dialogBox">
    <el-dialog v-model="loginVisible" :append-to-body="false" width="900" :custom-class="'customdialog'" :show-close="false">
    <template #header>
      <div style="display: flex;justify-content: flex-end;">
        <el-icon  style="color: #fff;font-size: 30px;cursor: pointer;" @click="loginVisible=false">
          <Close />
        </el-icon>
      </div>
    </template>
    <div style="display: flex;">
      <img src="@/assets/images/1.jpg" alt="">
      <div class="loginForm">
        <template v-if="tab==1||tab==0">


          <h3>临床研究信息化系统平台</h3>
          <div class="logintab">
            <p :class="tab == 0 ? 'tabon' : ''" @click="tab = 0">短信登录</p>
            <p :class="tab == 1 ? 'tabon' : ''" @click="tab = 1">密码登录</p>
          </div>
          <template v-if="tab == 0">
            <div class="input">
              <input type="text" placeholder="请输入手机号">
            </div>
            <div class="input">
              <input type="text" placeholder="请输入验证码">
              <div class="getcode">获取验证码</div>
            </div>
          </template>
          <template v-if="tab == 1">
            <div class="input">
              <input type="text" placeholder="请输入手机号">
            </div>
            <div class="input">
              <input type="text" placeholder="请输入验证码">
              <el-icon>
                <Hide />
              </el-icon>

            </div>
          </template>
          <button class="login">登录</button>
          <div class="register">
            用户注册
            <p @click="tab = 3">忘记密码</p>
          </div>
          <div class="xy">《隐私政策》</div>
        </template>
        <template v-if="tab==3||tab==4">
          <h3>手机重置密码</h3>
          <template v-if="tab == 3">
            <div class="input">
              <input type="text" placeholder="请输入手机号">
            </div>
            <div class="input">
              <input type="text" placeholder="请输入验证码">
              <div class="getcode">获取验证码</div>
            </div>
            <button @click="tab=4" class="login">下一步</button>

          </template>
          <template v-if="tab == 4">
            <div class="input">
              <input type="text" placeholder="请输入验证码">
              <el-icon>
                <Hide />
              </el-icon>

            </div>
            <div class="input">
              <input type="text" placeholder="请输入验证码">
              <el-icon>
                <Hide />
              </el-icon>

            </div>
            <button @click="tab=4" class="login">保存</button>

          </template>

          </template>
      </div>
    </div>


  </el-dialog>
</div>

</template>
<style lang="scss" scoped>
.nav-sub {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  margin: 0;

  li {
    width: 100%;
    zoom: 1;
  }

  a {
    text-align: center;
    display: block;
    color: #333;
    line-height: 40px;
    font-size: 16px;
  }

  a:hover {
    background: #0e4f8f;
    color: #fff;
  }
}

.header_r {
  display: flex;

  .line {
    height: 15px;
    width: 1px;
    margin: 0 10px;
    background-color: #d6d6d6;
  }

  p {
    cursor: pointer;
  }
}

.nLi {
  margin-right: 60px;
  text-align: center;
}

.nLi:last-child {
  margin-right: 0;
}

.logo {
  img {
    width: 166px;
    height: auto;
  }
}

.nlion a {
  color: #0c9397 !important;
}

.customdialog {
  padding: 0;
}

.loginForm {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 465px;
  height: 520px;
  color: #888;
  font-size: 16px;

  h3 {
    font-weight: 500;
    font-size: 22px;
    margin: 63px 0 60px;
    color: #000000;
  }
}

.logintab {
  display: flex;
  margin-bottom: 40px;
  width: 100%;
  padding-left: 46px;

  p {
    font-size: 18px;
    color: #888;
    margin-right: 20px;
    cursor: pointer;
  }

  .tabon {
    color: #0c9397;
    padding-bottom: 8px;
    border-bottom: 2px solid #0c9397;
  }
}

.input {
  width: 370px;
  height: 43px;
  background: #f8f8fa;
  border-radius: 3px;
  padding: 0 16px;
  margin-bottom: 13px;
  display: flex;
  align-items: center;

  input {
    background: #f8f8fa;
    height: 43px;
    flex: 1;
  }

  .getcode {
    padding-left: 19px;
    border-left: 1px solid #888;
    color: #888;
    height: 14px;
    cursor: pointer;
    line-height: 14px;
  }
}

.login {
  width: 370px;
  height: 43px;
  background: #0c9397;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  line-height: 43px;
  cursor: pointer;

  border-radius: 3px;
}

.register {
  text-align: left;
  width: 100%;
  margin-top: 16px;
  padding: 0 46px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.xy {
  cursor: pointer;

  margin-top: 70px;
}
</style>